<template>
    <div class="app-container">
        <!-- 查询 -->
        <div class="container-module" style="padding: 20px 0 0 0;">
            <el-form class="searchForm" :inline="true" ref="searchForm"
                :model="searchForm" label-width="85px" size="small">
                <el-row style="display: flex;width: 100%;">
                  <div style="flex: 1">
                   <el-form-item label="行业名称">
                       <el-input v-model="searchForm.name" placeholder="请输入行业名称" clearable />
                   </el-form-item>
                   <el-form-item label="创建时间">
                       <el-date-picker
                         v-model="searchForm.range_date"
                         clearable
                         value-format="yyyy-MM-dd"
                         type="daterange"
                         range-separator="至"
                         start-placeholder="开始日期"
                         end-placeholder="结束日期"
                       >
                       </el-date-picker>
                   </el-form-item>
                  </div>
                    <div class="SearchBtn" style="padding-right: 10px;">
                        <el-button type="primary" size="small" icon="el-icon-search" @click="doSearchGoods">查询</el-button>
                        <el-button size="small" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                    </div>
                </el-row>
            </el-form>
        </div>
        <el-divider></el-divider>
        <div class="addAndTableRelate">
            <div>
                <el-button icon="el-icon-plus" type="primary" size="small" @click="addDrawer('添加商户行业')">添加商户行业</el-button>
            </div>
            <div>
                <el-button icon="el-icon-download" type="primary" size="small" plain
                    style="margin-right: 10px;">批量导出</el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                    <span class="el-dropdown-link">
                        <el-button icon="el-icon-s-operation" style="padding: 5px; font-size: 16px;"></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                            <el-checkbox v-model="checkboxTableThead" :label="fruit">
                                {{ tableTheadOptions[fruit].label }}</el-checkbox>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- 列表 -->
        <div style="margin-top: 20px">
            <el-table v-loading="loading"
                :header-cell-style="{ 'background-color': '#e5eeff', color: '#5f687c', height: '47px', fontWeight: 'normal' }"
                highlight-current-row :max-height="tableHeight" :data="tableList" style="width: 100%">
                <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                    :min-width="tableTheadOptions[fruit].minwidth" align="center">
                    <template slot-scope="scope">
                        <div v-if="fruit == 'name'">
                            <!-- 行业名称 -->
                            <el-tooltip :content="scope.row.name" :disabled="isShowTooltip" effect="dark"
                                placement="top">
                                <div @mouseover="onMouseOver(scope.row.name)"
                                    style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                                    <span :ref="scope.row.name">{{ scope.row.name }}</span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div v-else-if="fruit == 'demand'">
                            <!-- 行业入驻要求 -->
                            <el-tooltip :content="scope.row.demand" effect="dark"
                                placement="top">
                                <div
                                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    <div v-html="scope.row.demand"></div>
                                </div>
                            </el-tooltip>
                        </div>
                        <div v-else-if="fruit == 'remark'">
                            <!-- 说明 -->
                            <el-tooltip :content="scope.row.remark" :disabled="isShowTooltip" effect="dark"
                                placement="top">
                                <div @mouseover="onMouseOver(scope.row.remark)"
                                    style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                                    <span :ref="scope.row.remark">{{ scope.row.remark }}</span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div v-else>
                            {{ scope.row[fruit] }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" width="120" prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="goEditGoods(scope.row, true)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-popconfirm title="确定删除吗？" @confirm="delSelectGoods(scope.row)">
                            <el-button v-hasPermi="'selecgoods/del'" slot="reference" type="text" size="mini">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 10px;">
                <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.count"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <add v-if="ifshowadd" :title="drawerTitle" :industryId="industryId"></add>
    </div>
</template>

<script>
//引入添加商户行业抽屉
import add from './components/add.vue';
// 全部表头选项
const tableTheadOption = {
    id: { label: "ID", field: "id", minwidth: '80px' },
    name: { label: "行业名称", field: "name", minwidth: '100px' },
    security_deposit: { label: "行业保证金", field: "security_deposit", minwidth: '100px' },
    demand: { label: "行业入驻要求", field: "demand", minwidth: '150px' },
    remark: { label: "说明", field: "remark", minwidth: '150px' },
    created_at: { label: "创建时间", field: "created_at", minwidth: '120px' },
}
//全部表头
const allTableThead = ['id', 'name', 'security_deposit', 'demand', 'remark', 'created_at']
//默认表头
const defaultTableThead = ['id', 'name', 'security_deposit', 'demand', 'remark', 'created_at']
//商户行业列表
import { getCateList,delCateList } from '@/api/merchant/index';
import { getDictionaryValueList } from "@/api/admin/dictionary.js";
import { getCategoryList } from "@/api/commodity/index";
export default {
    name: "SelectGoods",
    data() {
        return {
          industryId:'',//编辑详情
            //查询
            searchForm: {
                page: 1,
                count: 10,
                name:'',
                range_date:[]
            },
            //是否展开余下查询
            ifShowSearch: false,
            // 动态显示表头默认表头
            tableTheadOptions: tableTheadOption,//表头选项
            allTableThead: allTableThead,//全部表头
            tableThead: defaultTableThead, // 默认表头
            checkboxTableThead: defaultTableThead, // 默认表头值
            tableKey: 1, // 为了保证table 每次都会重渲
            tableHeight: this.calculateTableHeight(), // 初始化表格高度
            //表格加载
            loading: false,
            //列表
            tableList: [],
            //总条数
            total: 0,
            //是否显示文字提示内容
            isShowTooltip: false,
            //抽屉标题
            drawerTitle: "",
            //是否打开添加选品抽屉
            ifshowadd: false,
        };
    },
    components: {
        add,
    },
    created() {
        this.doSearchGoods();
    },
    mounted() {
        window.addEventListener('resize', this.handleResize);
    },
    watch: {
        //监听表头变化
        checkboxTableThead(valArr) {
            this.tableThead = this.allTableThead.filter(
                (i) => valArr.indexOf(i) >= 0
            );
            this.tableKey = this.tableKey + 1;
        },
    },
    methods: {
      //编辑
      goEditGoods(row){
        this.drawerTitle = '编辑商户行业';
        this.industryId = row.id
        this.ifshowadd = true;
      },
        // 窗口大小变化时重新计算表格高度
        handleResize() {
            this.tableHeight = this.calculateTableHeight();
        },
        // 根据实际需求计算表格高度
        calculateTableHeight() {
            return window.innerHeight - 136;
        },
        //单元格内容超出，显示文字提示内容
        onMouseOver(str) {
            const tag = this.$refs[str][0]
            const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
            const contentWidth = tag.offsetWidth // 获取元素可视宽度
            this.isShowTooltip = contentWidth <= parentWidth
        },
        // 打开抽屉
        addDrawer(title) {
            this.drawerTitle = title;
            this.ifshowadd = true;
        },
        //关闭抽屉
        closeDrawer() {
            this.ifshowadd = false;
            this.industryId = ''
            this.doSearchGoods();
        },
        //删除行业
        delSelectGoods(row){
          delCateList({id:row.id})
                  .then((res) => {
                      this.loading = false;
                      if (res.code !== 200) {
                          this.$messages.error(res.msg);
                          return;
                      }
                      this.doSearchGoods();
                  })
                  .catch(() => {
                      this.loading = false;
                  });
          },
        // 查询选品列表
        doSearchGoods() {
            this.loading = true;
            getCateList(this.searchForm)
                .then((res) => {
                    this.loading = false;
                    if (res.code !== 200) {
                        this.$messages.error(res.msg);
                        return;
                    }
                    this.total = res.data.total;
                    this.tableList = res.data.list;
                })
                .catch(() => {
                    this.loading = false;
                });
        },

        // 重置选品列表搜索
        resetSearch() {
            this.searchForm.page = 1;
            this.searchForm.count = 10;
            this.searchForm.name = ''
            this.searchForm.range_date = []
            this.doSearchGoods();
        },

        // 商户分类切换分页
        handleCurrentChange(val) {
            this.searchForm.page = val;
            this.doSearchGoods();
        },
        // 商户分类切换每页数量
        handleSizeChange(val) {
            this.searchForm.count = val;
            this.doSearchGoods();
        },
    },
    destroyed() {
        // 组件销毁时移除事件监听
        window.removeEventListener('resize', this.handleResize);
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 10px 20px;

    .searchForm {
        display: flex;

        .SearchBtn {
            display: flex;
            justify-content: flex-end;
        }
    }

    // 筛选超出隐藏
    .overoverflow-hidden {
        height: 50px;
        overflow: hidden;

    }

    .addAndTableRelate {
        display: flex;
        justify-content: space-between;
    }

}
</style>
<style lang="scss">
.el-button {
    height: 30px;
}

.margin-10 {
    margin: 10px;
}

.title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

.sn {
    color: #606266;
    font-size: 13px;
}

.demo-table-expand {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    color: #515a6e;

    div {
        width: 30%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
    }
}

.marginTop {
    padding: 0 15px !important;
}

.sn {
    color: #606266;
    font-size: 13px;
}

.order_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 0;
    font-size: 13px;
    color: #666;
}

.input-with-select .el-select .el-input {
    width: 110px !important;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

#editinput .el-select .el-input {
    width: 440px !important;
}

.commont-title {
    font-size: 16px;
    font-weight: 600;
}

label {
    font-weight: normal;
    font-size: 12px;
}
</style>
